<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>优购商城 - 您的一站式购物平台</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#FF7D00',
            neutral: {
              100: '#F5F7FA',
              200: '#E5E6EB',
              300: '#C9CDD4',
              400: '#86909C',
              500: '#4E5969',
              600: '#272E3B',
              700: '#1D2129',
            }
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
      }
      .btn-hover {
        @apply transform transition-all duration-300 hover:scale-105 hover:shadow-lg;
      }
      .input-focus {
        @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
      }
      .nav-link {
        @apply relative text-neutral-600 hover:text-primary transition-colors duration-200 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-primary after:transition-all after:duration-200 hover:after:w-full;
      }
      .product-card {
        @apply bg-white rounded-xl overflow-hidden card-shadow transition-all duration-300 hover:shadow-xl;
      }
    }
  </style>
</head>
<body class="font-inter bg-neutral-100 text-neutral-700 min-h-screen flex flex-col">
  <!-- 导航栏 -->
  <header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/95 backdrop-blur-sm shadow-sm">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <!-- 品牌标志 -->
      <a href="#" class="flex items-center space-x-2" onclick="showPage('home')">
        <span class="text-primary text-3xl"><i class="fa fa-shopping-bag"></i></span>
        <span class="text-xl font-bold text-neutral-700">优购商城</span>
      </a>
      
      <!-- 导航链接 - 桌面端 -->
      <nav class="hidden md:flex items-center space-x-8">
        <a href="#" class="nav-link font-medium" onclick="showPage('home')">首页</a>
        <a href="#" class="nav-link font-medium">商品分类</a>
        <a href="#" class="nav-link font-medium">热卖榜单</a>
        <a href="#" class="nav-link font-medium">优惠活动</a>
      </nav>
      
      <!-- 用户操作区 -->
      <div class="flex items-center space-x-4">
        <button class="p-2 text-neutral-600 hover:text-primary transition-colors" title="搜索">
          <i class="fa fa-search text-lg"></i>
        </button>
        <button class="p-2 text-neutral-600 hover:text-primary transition-colors relative" title="购物车">
          <i class="fa fa-shopping-cart text-lg"></i>
          <span class="absolute -top-1 -right-1 bg-secondary text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span>
        </button>
        <button id="userBtn" class="p-2 text-neutral-600 hover:text-primary transition-colors" title="用户中心">
          <i class="fa fa-user-circle text-lg"></i>
        </button>
        <button class="md:hidden p-2 text-neutral-600 hover:text-primary transition-colors" id="mobileMenuBtn">
          <i class="fa fa-bars text-xl"></i>
        </button>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div id="mobileMenu" class="md:hidden hidden bg-white border-t border-neutral-200 absolute w-full">
      <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
        <a href="#" class="py-2 border-b border-neutral-100" onclick="showPage('home'); closeMobileMenu()">首页</a>
        <a href="#" class="py-2 border-b border-neutral-100" onclick="closeMobileMenu()">商品分类</a>
        <a href="#" class="py-2 border-b border-neutral-100" onclick="closeMobileMenu()">热卖榜单</a>
        <a href="#" class="py-2" onclick="closeMobileMenu()">优惠活动</a>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="flex-grow pt-16">
    <!-- 首页 -->
    <section id="home-page" class="page-section">
      <!-- 轮播图 -->
      <div class="relative h-[400px] md:h-[500px] overflow-hidden">
        <div class="carousel relative h-full">
          <div class="carousel-item absolute inset-0 opacity-100 transition-opacity duration-1000">
            <img src="https://picsum.photos/id/26/1600/900" alt="促销活动" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent flex items-center">
              <div class="container mx-auto px-6 md:px-12">
                <h2 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-white mb-4 leading-tight">
                  夏季大促<br>全场低至5折
                </h2>
                <p class="text-[clamp(1rem,2vw,1.25rem)] text-white/90 mb-8 max-w-xl">
                  精选千款商品，限时抢购，错过再等一年！新用户注册即送百元优惠券
                </p>
                <button class="bg-secondary hover:bg-secondary/90 text-white font-medium py-3 px-8 rounded-full btn-hover">
                  立即抢购
                </button>
              </div>
            </div>
          </div>
        </div>
        <button class="absolute top-1/2 left-4 -translate-y-1/2 w-10 h-10 rounded-full bg-white/30 backdrop-blur-sm flex items-center justify-center text-white hover:bg-white/50 transition-colors">
          <i class="fa fa-angle-left text-xl"></i>
        </button>
        <button class="absolute top-1/2 right-4 -translate-y-1/2 w-10 h-10 rounded-full bg-white/30 backdrop-blur-sm flex items-center justify-center text-white hover:bg-white/50 transition-colors">
          <i class="fa fa-angle-right text-xl"></i>
        </button>
        <div class="absolute bottom-6 left-1/2 -translate-x-1/2 flex space-x-2">
          <button class="w-3 h-3 rounded-full bg-white opacity-100"></button>
          <button class="w-3 h-3 rounded-full bg-white opacity-50"></button>
          <button class="w-3 h-3 rounded-full bg-white opacity-50"></button>
        </div>
      </div>
      
      <!-- 分类导航 -->
      <section class="py-12 bg-white">
        <div class="container mx-auto px-4">
          <h3 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-center mb-10">商品分类</h3>
          <div class="grid grid-cols-4 md:grid-cols-8 gap-4 md:gap-8">
            <a href="#" class="flex flex-col items-center group">
              <div class="w-16 h-16 md:w-20 md:h-20 rounded-full bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary/20 transition-colors">
                <i class="fa fa-mobile text-2xl md:text-3xl text-primary"></i>
              </div>
              <span class="text-sm md:text-base text-center">手机数码</span>
            </a>
            <a href="#" class="flex flex-col items-center group">
              <div class="w-16 h-16 md:w-20 md:h-20 rounded-full bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary/20 transition-colors">
                <i class="fa fa-laptop text-2xl md:text-3xl text-primary"></i>
              </div>
              <span class="text-sm md:text-base text-center">电脑办公</span>
            </a>
            <a href="#" class="flex flex-col items-center group">
              <div class="w-16 h-16 md:w-20 md:h-20 rounded-full bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary/20 transition-colors">
                <i class="fa fa-clock-o text-2xl md:text-3xl text-primary"></i>
              </div>
              <span class="text-sm md:text-base text-center">钟表首饰</span>
            </a>
            <a href="#" class="flex flex-col items-center group">
              <div class="w-16 h-16 md:w-20 md:h-20 rounded-full bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary/20 transition-colors">
                <i class="fa fa-home text-2xl md:text-3xl text-primary"></i>
              </div>
              <span class="text-sm md:text-base text-center">家居生活</span>
            </a>
            <a href="#" class="flex flex-col items-center group">
              <div class="w-16 h-16 md:w-20 md:h-20 rounded-full bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary/20 transition-colors">
                <i class="fa fa-gamepad text-2xl md:text-3xl text-primary"></i>
              </div>
              <span class="text-sm md:text-base text-center">游戏娱乐</span>
            </a>
            <a href="#" class="flex flex-col items-center group">
              <div class="w-16 h-16 md:w-20 md:h-20 rounded-full bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary/20 transition-colors">
                <i class="fa fa-book text-2xl md:text-3xl text-primary"></i>
              </div>
              <span class="text-sm md:text-base text-center">图书音像</span>
            </a>
            <a href="#" class="flex flex-col items-center group">
              <div class="w-16 h-16 md:w-20 md:h-20 rounded-full bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary/20 transition-colors">
                <i class="fa fa-car text-2xl md:text-3xl text-primary"></i>
              </div>
              <span class="text-sm md:text-base text-center">汽车用品</span>
            </a>
            <a href="#" class="flex flex-col items-center group">
              <div class="w-16 h-16 md:w-20 md:h-20 rounded-full bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary/20 transition-colors">
                <i class="fa fa-ellipsis-h text-2xl md:text-3xl text-primary"></i>
              </div>
              <span class="text-sm md:text-base text-center">更多分类</span>
            </a>
          </div>
        </div>
      </section>
      
      <!-- 热销商品 -->
      <section class="py-16 bg-neutral-100">
        <div class="container mx-auto px-4">
          <div class="flex justify-between items-center mb-10">
            <h3 class="text-[clamp(1.5rem,3vw,2rem)] font-bold">热销推荐</h3>
            <a href="#" class="text-primary hover:text-primary/80 flex items-center group">
              查看全部
              <i class="fa fa-angle-right ml-1 group-hover:translate-x-1 transition-transform"></i>
            </a>
          </div>
          
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- 商品卡片1 -->
            <div class="product-card">
              <div class="relative overflow-hidden">
                <img src="https://picsum.photos/id/96/500/500" alt="智能手机" class="w-full h-64 object-cover transition-transform duration-500 hover:scale-110">
                <span class="absolute top-3 left-3 bg-secondary text-white text-xs py-1 px-2 rounded">热销</span>
                <button class="absolute bottom-3 right-3 w-10 h-10 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center text-neutral-600 hover:bg-primary hover:text-white transition-colors">
                  <i class="fa fa-heart-o"></i>
                </button>
              </div>
              <div class="p-4">
                <h4 class="font-medium mb-2 line-clamp-2 h-12">新款智能手机 6.7英寸超清全面屏 大电池长续航</h4>
                <div class="flex items-center mb-2">
                  <div class="flex text-yellow-400 text-xs">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star-half-o"></i>
                  </div>
                  <span class="text-neutral-400 text-xs ml-2">(128)</span>
                </div>
                <div class="flex items-center justify-between">
                  <div>
                    <span class="text-secondary font-bold text-lg">¥2999</span>
                    <span class="text-neutral-400 text-sm line-through ml-2">¥3499</span>
                  </div>
                  <button class="bg-primary/10 hover:bg-primary/20 text-primary p-2 rounded-full transition-colors">
                    <i class="fa fa-shopping-cart"></i>
                  </button>
                </div>
              </div>
            </div>
            
            <!-- 商品卡片2 -->
            <div class="product-card">
              <div class="relative overflow-hidden">
                <img src="https://picsum.photos/id/20/500/500" alt="无线耳机" class="w-full h-64 object-cover transition-transform duration-500 hover:scale-110">
                <span class="absolute top-3 left-3 bg-primary text-white text-xs py-1 px-2 rounded">新品</span>
                <button class="absolute bottom-3 right-3 w-10 h-10 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center text-neutral-600 hover:bg-primary hover:text-white transition-colors">
                  <i class="fa fa-heart-o"></i>
                </button>
              </div>
              <div class="p-4">
                <h4 class="font-medium mb-2 line-clamp-2 h-12">无线蓝牙耳机 主动降噪 高清通话 长续航</h4>
                <div class="flex items-center mb-2">
                  <div class="flex text-yellow-400 text-xs">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star-o"></i>
                  </div>
                  <span class="text-neutral-400 text-xs ml-2">(86)</span>
                </div>
                <div class="flex items-center justify-between">
                  <div>
                    <span class="text-secondary font-bold text-lg">¥799</span>
                    <span class="text-neutral-400 text-sm line-through ml-2">¥999</span>
                  </div>
                  <button class="bg-primary/10 hover:bg-primary/20 text-primary p-2 rounded-full transition-colors">
                    <i class="fa fa-shopping-cart"></i>
                  </button>
                </div>
              </div>
            </div>
            
            <!-- 商品卡片3 -->
            <div class="product-card">
              <div class="relative overflow-hidden">
                <img src="https://picsum.photos/id/119/500/500" alt="智能手表" class="w-full h-64 object-cover transition-transform duration-500 hover:scale-110">
                <button class="absolute bottom-3 right-3 w-10 h-10 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center text-neutral-600 hover:bg-primary hover:text-white transition-colors">
                  <i class="fa fa-heart-o"></i>
                </button>
              </div>
              <div class="p-4">
                <h4 class="font-medium mb-2 line-clamp-2 h-12">智能手表 心率监测 血氧检测 运动模式 长续航</h4>
                <div class="flex items-center mb-2">
                  <div class="flex text-yellow-400 text-xs">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                  </div>
                  <span class="text-neutral-400 text-xs ml-2">(205)</span>
                </div>
                <div class="flex items-center justify-between">
                  <div>
                    <span class="text-secondary font-bold text-lg">¥599</span>
                    <span class="text-neutral-400 text-sm line-through ml-2">¥699</span>
                  </div>
                  <button class="bg-primary/10 hover:bg-primary/20 text-primary p-2 rounded-full transition-colors">
                    <i class="fa fa-shopping-cart"></i>
                  </button>
                </div>
              </div>
            </div>
            
            <!-- 商品卡片4 -->
            <div class="product-card">
              <div class="relative overflow-hidden">
                <img src="https://picsum.photos/id/160/500/500" alt="平板电脑" class="w-full h-64 object-cover transition-transform duration-500 hover:scale-110">
                <span class="absolute top-3 left-3 bg-red-500 text-white text-xs py-1 px-2 rounded">限时</span>
                <button class="absolute bottom-3 right-3 w-10 h-10 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center text-neutral-600 hover:bg-primary hover:text-white transition-colors">
                  <i class="fa fa-heart-o"></i>
                </button>
              </div>
              <div class="p-4">
                <h4 class="font-medium mb-2 line-clamp-2 h-12">平板电脑 10.9英寸 轻薄便携 学习娱乐二合一 高清屏</h4>
                <div class="flex items-center mb-2">
                  <div class="flex text-yellow-400 text-xs">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star-half-o"></i>
                    <i class="fa fa-star-o"></i>
                  </div>
                  <span class="text-neutral-400 text-xs ml-2">(156)</span>
                </div>
                <div class="flex items-center justify-between">
                  <div>
                    <span class="text-secondary font-bold text-lg">¥1899</span>
                    <span class="text-neutral-400 text-sm line-through ml-2">¥2299</span>
                  </div>
                  <button class="bg-primary/10 hover:bg-primary/20 text-primary p-2 rounded-full transition-colors">
                    <i class="fa fa-shopping-cart"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 限时抢购 -->
      <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
          <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-10">
            <div>
              <h3 class="text-[clamp(1.5rem,3vw,2rem)] font-bold mb-2">限时抢购</h3>
              <p class="text-neutral-500">距离结束还有：</p>
            </div>
            <div class="flex space-x-3 mt-4 md:mt-0">
              <div class="w-12 h-12 bg-neutral-700 text-white rounded flex items-center justify-center font-bold text-lg">12</div>
              <span class="text-neutral-700 text-xl font-bold">:</span>
              <div class="w-12 h-12 bg-neutral-700 text-white rounded flex items-center justify-center font-bold text-lg">34</div>
              <span class="text-neutral-700 text-xl font-bold">:</span>
              <div class="w-12 h-12 bg-neutral-700 text-white rounded flex items-center justify-center font-bold text-lg">56</div>
            </div>
          </div>
          
          <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
            <!-- 限时商品1 -->
            <div class="bg-neutral-100 rounded-lg overflow-hidden transition-transform duration-300 hover:scale-105">
              <div class="h-48 overflow-hidden">
                <img src="https://picsum.photos/id/250/300/300" alt="商品图片" class="w-full h-full object-cover">
              </div>
              <div class="p-3">
                <p class="text-xs text-neutral-500 line-clamp-2 h-10 mb-2">迷你便携充电宝 10000mAh</p>
                <div class="flex items-center justify-between">
                  <span class="text-secondary font-bold">¥59</span>
                  <span class="text-neutral-400 text-xs line-through">¥99</span>
                </div>
              </div>
            </div>
            
            <!-- 限时商品2-6 结构相同，图片和文字不同 -->
            <div class="bg-neutral-100 rounded-lg overflow-hidden transition-transform duration-300 hover:scale-105">
              <div class="h-48 overflow-hidden">
                <img src="https://picsum.photos/id/96/300/300" alt="商品图片" class="w-full h-full object-cover">
              </div>
              <div class="p-3">
                <p class="text-xs text-neutral-500 line-clamp-2 h-10 mb-2">有线耳机 重低音 线控带麦</p>
                <div class="flex items-center justify-between">
                  <span class="text-secondary font-bold">¥29</span>
                  <span class="text-neutral-400 text-xs line-through">¥59</span>
                </div>
              </div>
            </div>
            
            <div class="bg-neutral-100 rounded-lg overflow-hidden transition-transform duration-300 hover:scale-105">
              <div class="h-48 overflow-hidden">
                <img src="https://picsum.photos/id/119/300/300" alt="商品图片" class="w-full h-full object-cover">
              </div>
              <div class="p-3">
                <p class="text-xs text-neutral-500 line-clamp-2 h-10 mb-2">手机支架 可折叠 多角度调节</p>
                <div class="flex items-center justify-between">
                  <span class="text-secondary font-bold">¥15</span>
                  <span class="text-neutral-400 text-xs line-through">¥39</span>
                </div>
              </div>
            </div>
            
            <div class="bg-neutral-100 rounded-lg overflow-hidden transition-transform duration-300 hover:scale-105">
              <div class="h-48 overflow-hidden">
                <img src="https://picsum.photos/id/20/300/300" alt="商品图片" class="w-full h-full object-cover">
              </div>
              <div class="p-3">
                <p class="text-xs text-neutral-500 line-clamp-2 h-10 mb-2">手机壳 防摔 个性图案</p>
                <div class="flex items-center justify-between">
                  <span class="text-secondary font-bold">¥19</span>
                  <span class="text-neutral-400 text-xs line-through">¥49</span>
                </div>
              </div>
            </div>
            
            <div class="bg-neutral-100 rounded-lg overflow-hidden transition-transform duration-300 hover:scale-105">
              <div class="h-48 overflow-hidden">
                <img src="https://picsum.photos/id/160/300/300" alt="商品图片" class="w-full h-full object-cover">
              </div>
              <div class="p-3">
                <p class="text-xs text-neutral-500 line-clamp-2 h-10 mb-2">钢化膜 高清防指纹</p>
                <div class="flex items-center justify-between">
                  <span class="text-secondary font-bold">¥12</span>
                  <span class="text-neutral-400 text-xs line-through">¥29</span>
                </div>
              </div>
            </div>
            
            <div class="bg-neutral-100 rounded-lg overflow-hidden transition-transform duration-300 hover:scale-105">
              <div class="h-48 overflow-hidden">
                <img src="https://picsum.photos/id/26/300/300" alt="商品图片" class="w-full h-full object-cover">
              </div>
              <div class="p-3">
                <p class="text-xs text-neutral-500 line-clamp-2 h-10 mb-2">数据线 快充 2米长</p>
                <div class="flex items-center justify-between">
                  <span class="text-secondary font-bold">¥25</span>
                  <span class="text-neutral-400 text-xs line-through">¥59</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 品牌推荐 -->
      <section class="py-12 bg-neutral-100">
        <div class="container mx-auto px-4">
          <h3 class="text-[clamp(1.5rem,3vw,2rem)] font-bold mb-10 text-center">品牌推荐</h3>
          <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
            <div class="bg-white h-24 rounded-lg flex items-center justify-center p-4 opacity-70 hover:opacity-100 transition-opacity">
              <img src="https://picsum.photos/id/1/200/80" alt="品牌1" class="max-h-full max-w-full object-contain">
            </div>
            <div class="bg-white h-24 rounded-lg flex items-center justify-center p-4 opacity-70 hover:opacity-100 transition-opacity">
              <img src="https://picsum.photos/id/2/200/80" alt="品牌2" class="max-h-full max-w-full object-contain">
            </div>
            <div class="bg-white h-24 rounded-lg flex items-center justify-center p-4 opacity-70 hover:opacity-100 transition-opacity">
              <img src="https://picsum.photos/id/3/200/80" alt="品牌3" class="max-h-full max-w-full object-contain">
            </div>
            <div class="bg-white h-24 rounded-lg flex items-center justify-center p-4 opacity-70 hover:opacity-100 transition-opacity">
              <img src="https://picsum.photos/id/4/200/80" alt="品牌4" class="max-h-full max-w-full object-contain">
            </div>
            <div class="bg-white h-24 rounded-lg flex items-center justify-center p-4 opacity-70 hover:opacity-100 transition-opacity">
              <img src="https://picsum.photos/id/5/200/80" alt="品牌5" class="max-h-full max-w-full object-contain">
            </div>
            <div class="bg-white h-24 rounded-lg flex items-center justify-center p-4 opacity-70 hover:opacity-100 transition-opacity">
              <img src="https://picsum.photos/id/6/200/80" alt="品牌6" class="max-h-full max-w-full object-contain">
            </div>
          </div>
        </div>
      </section>
      
      <!-- 订阅区域 -->
      <section class="py-16 bg-primary relative overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-full opacity-10">
          <img src="https://picsum.photos/id/1015/1600/400" alt="" class="w-full h-full object-cover">
        </div>
        <div class="container mx-auto px-4 relative z-10">
          <div class="max-w-2xl mx-auto text-center">
            <h3 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-white mb-4">订阅获取最新优惠</h3>
            <p class="text-white/80 mb-8">第一时间获取独家优惠信息和新品上市通知</p>
            <div class="flex flex-col sm:flex-row gap-3">
              <input type="email" placeholder="请输入您的邮箱地址" class="flex-grow px-4 py-3 rounded-full input-focus">
              <button class="bg-secondary hover:bg-secondary/90 text-white font-medium py-3 px-8 rounded-full btn-hover whitespace-nowrap">
                立即订阅
              </button>
            </div>
          </div>
        </div>
      </section>
    </section>
    
    <!-- 登录页面 -->
    <section id="login-page" class="page-section hidden py-16">
      <div class="container mx-auto px-4">
        <div class="max-w-md mx-auto">
          <div class="text-center mb-10">
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold mb-2">用户登录</h2>
            <p class="text-neutral-500">欢迎回来，请登录您的账号</p>
          </div>
          
          <div class="bg-white rounded-2xl p-8 card-shadow">
            <form id="loginForm">
              <div class="mb-6">
                <label for="loginPhone" class="block text-sm font-medium text-neutral-700 mb-2">手机号码</label>
                <div class="relative">
                  <span class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400">
                    <i class="fa fa-phone"></i>
                  </span>
                  <input type="tel" id="loginPhone" placeholder="请输入手机号码" class="w-full pl-10 pr-4 py-3 border border-neutral-300 rounded-lg input-focus">
                </div>
              </div>
              
              <div class="mb-6">
                <div class="flex justify-between items-center mb-2">
                  <label for="loginPassword" class="block text-sm font-medium text-neutral-700">密码</label>
                  <a href="#" class="text-sm text-primary hover:text-primary/80">忘记密码？</a>
                </div>
                <div class="relative">
                  <span class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400">
                    <i class="fa fa-lock"></i>
                  </span>
                  <input type="password" id="loginPassword" placeholder="请输入密码" class="w-full pl-10 pr-10 py-3 border border-neutral-300 rounded-lg input-focus">
                  <button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-700 transition-colors" id="toggleLoginPwd">
                    <i class="fa fa-eye-slash"></i>
                  </button>
                </div>
              </div>
              
              <div class="mb-8">
                <button type="button" onclick="login()" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg btn-hover">
                  登录
                </button>
              </div>
              
              <div class="text-center">
                <p class="text-neutral-500 text-sm">
                  还没有账号？
                  <button type="button" class="text-primary font-medium hover:underline" onclick="showPage('register')">立即注册</button>
                </p>
              </div>
              
              <div class="mt-8">
                <div class="flex items-center justify-center mb-6">
                  <div class="h-px bg-neutral-200 flex-grow"></div>
                  <span class="px-4 text-neutral-400 text-sm">其他登录方式</span>
                  <div class="h-px bg-neutral-200 flex-grow"></div>
                </div>
                
                <div class="flex justify-center space-x-6">
                  <button type="button" class="w-12 h-12 rounded-full bg-[#07C160]/10 flex items-center justify-center text-[#07C160] hover:bg-[#07C160]/20 transition-colors">
                    <i class="fa fa-weixin text-xl"></i>
                  </button>
                  <button type="button" class="w-12 h-12 rounded-full bg-[#1DA1F2]/10 flex items-center justify-center text-[#1DA1F2] hover:bg-[#1DA1F2]/20 transition-colors">
                    <i class="fa fa-qq text-xl"></i>
                  </button>
                  <button type="button" class="w-12 h-12 rounded-full bg-[#E4405F]/10 flex items-center justify-center text-[#E4405F] hover:bg-[#E4405F]/20 transition-colors">
                    <i class="fa fa-weibo text-xl"></i>
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 注册页面 -->
    <section id="register-page" class="page-section hidden py-16">
      <div class="container mx-auto px-4">
        <div class="max-w-md mx-auto">
          <div class="text-center mb-10">
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold mb-2">用户注册</h2>
            <p class="text-neutral-500">创建新账号，开启购物之旅</p>
          </div>
          
          <div class="bg-white rounded-2xl p-8 card-shadow">
            <form id="registerForm">
              <div class="mb-6">
                <label for="registerPhone" class="block text-sm font-medium text-neutral-700 mb-2">手机号码</label>
                <div class="relative">
                  <span class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400">
                    <i class="fa fa-phone"></i>
                  </span>
                  <input type="tel" id="registerPhone" placeholder="请输入手机号码" class="w-full pl-10 pr-4 py-3 border border-neutral-300 rounded-lg input-focus">
                </div>
              </div>
              
              <div class="mb-6">
                <label for="registerCode" class="block text-sm font-medium text-neutral-700 mb-2">验证码</label>
                <div class="relative">
                  <span class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400">
                    <i class="fa fa-shield"></i>
                  </span>
                  <input type="text" id="registerCode" placeholder="请输入验证码" class="w-full pl-10 pr-32 py-3 border border-neutral-300 rounded-lg input-focus">
                  <button type="button" id="getCodeBtn" class="absolute right-2 top-1/2 -translate-y-1/2 bg-primary/10 text-primary text-sm py-1.5 px-3 rounded-md hover:bg-primary/20 transition-colors">
                    获取验证码
                  </button>
                </div>
              </div>
              
              <div class="mb-6">
                <label for="registerPassword" class="block text-sm font-medium text-neutral-700 mb-2">设置密码</label>
                <div class="relative">
                  <span class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400">
                    <i class="fa fa-lock"></i>
                  </span>
                  <input type="password" id="registerPassword" placeholder="请设置密码" class="w-full pl-10 pr-10 py-3 border border-neutral-300 rounded-lg input-focus">
                  <button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-700 transition-colors" id="toggleRegisterPwd">
                    <i class="fa fa-eye-slash"></i>
                  </button>
                </div>
              </div>
              
              <div class="mb-8">
                <label class="flex items-start space-x-2">
                  <input type="checkbox" class="mt-1 text-primary focus:ring-primary/20">
                  <span class="text-sm text-neutral-500">
                    我已阅读并同意<a href="#" class="text-primary">《用户服务协议》</a>和<a href="#" class="text-primary">《隐私政策》</a>
                  </span>
                </label>
              </div>
              
              <div class="mb-8">
                <button type="button" onclick="register()" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg btn-hover">
                  注册
                </button>
              </div>
              
              <div class="text-center">
                <p class="text-neutral-500 text-sm">
                  已有账号？
                  <button type="button" class="text-primary font-medium hover:underline" onclick="showPage('login')">立即登录</button>
                </p>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 用户信息页面 -->
    <section id="user-page" class="page-section hidden py-16">
      <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">
          <div class="text-center mb-10">
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold mb-2">个人中心</h2>
            <p class="text-neutral-500">管理您的个人信息和账户设置</p>
          </div>
          
          <div class="bg-white rounded-2xl overflow-hidden card-shadow mb-8">
            <!-- 用户信息头部 -->
            <div class="bg-primary/5 p-6 md:p-8">
              <div class="flex flex-col md:flex-row items-center">
                <div class="relative mb-6 md:mb-0">
                  <img id="userAvatar" src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-24 h-24 rounded-full object-cover border-4 border-white">
                  <button class="absolute bottom-0 right-0 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center shadow-md hover:bg-primary/90 transition-colors">
                    <i class="fa fa-camera"></i>
                  </button>
                </div>
                
                <div class="text-center md:text-left md:ml-8 flex-grow">
                  <div class="flex flex-col md:flex-row md:items-center justify-center md:justify-between mb-4">
                    <h3 id="userName" class="text-xl font-bold mb-2 md:mb-0">张三</h3>
                    <button onclick="editUserInfo()" class="text-primary hover:text-primary/80 text-sm flex items-center justify-center md:justify-end">
                      编辑资料 <i class="fa fa-angle-right ml-1"></i>
                    </button>
                  </div>
                  
                  <div class="grid grid-cols-3 gap-2 md:gap-6">
                    <div class="text-center">
                      <p class="text-2xl font-bold text-neutral-700">12</p>
                      <p class="text-sm text-neutral-500">待付款</p>
                    </div>
                    <div class="text-center">
                      <p class="text-2xl font-bold text-neutral-700">8</p>
                      <p class="text-sm text-neutral-500">待收货</p>
                    </div>
                    <div class="text-center">
                      <p class="text-2xl font-bold text-neutral-700">5</p>
                      <p class="text-sm text-neutral-500">待评价</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 用户详细信息 -->
            <div class="p-6 md:p-8">
              <h4 class="font-bold text-lg mb-6 pb-2 border-b border-neutral-200">个人信息</h4>
              
              <div class="space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-5 gap-4 items-center">
                  <p class="text-neutral-500 md:text-right">手机号码</p>
                  <p id="userPhone" class="md:col-span-4">138****6789</p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-5 gap-4 items-center">
                  <p class="text-neutral-500 md:text-right">邮箱</p>
                  <p id="userEmail" class="md:col-span-4">zhangsan***@example.com</p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-5 gap-4 items-center">
                  <p class="text-neutral-500 md:text-right">性别</p>
                  <p id="userGender" class="md:col-span-4">男</p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-5 gap-4 items-center">
                  <p class="text-neutral-500 md:text-right">生日</p>
                  <p id="userBirthday" class="md:col-span-4">1990-05-15</p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-5 gap-4 items-center">
                  <p class="text-neutral-500 md:text-right">会员等级</p>
                  <p class="md:col-span-4 flex items-center">
                    <span class="inline-block w-6 h-6 rounded-full bg-secondary text-white text-xs flex items-center justify-center mr-2">2</span>
                    白银会员
                  </p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-5 gap-4 items-center">
                  <p class="text-neutral-500 md:text-right">注册时间</p>
                  <p id="userRegTime" class="md:col-span-4">2023-03-18</p>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 账户安全 -->
          <div class="bg-white rounded-2xl overflow-hidden card-shadow">
            <div class="p-6 md:p-8">
              <h4 class="font-bold text-lg mb-6 pb-2 border-b border-neutral-200">账户安全</h4>
              
              <div class="space-y-4">
                <button class="w-full flex justify-between items-center p-4 hover:bg-neutral-50 rounded-lg transition-colors">
                  <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                      <i class="fa fa-lock text-primary"></i>
                    </div>
                    <div class="text-left">
                      <p class="font-medium">修改密码</p>
                      <p class="text-sm text-neutral-500">保护您的账户安全</p>
                    </div>
                  </div>
                  <i class="fa fa-angle-right text-neutral-400"></i>
                </button>
                
                <button class="w-full flex justify-between items-center p-4 hover:bg-neutral-50 rounded-lg transition-colors">
                  <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                      <i class="fa fa-mobile text-primary text-xl"></i>
                    </div>
                    <div class="text-left">
                      <p class="font-medium">更换手机号</p>
                      <p class="text-sm text-neutral-500">绑定新的手机号码</p>
                    </div>
                  </div>
                  <i class="fa fa-angle-right text-neutral-400"></i>
                </button>
                
                <button class="w-full flex justify-between items-center p-4 hover:bg-neutral-50 rounded-lg transition-colors">
                  <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                      <i class="fa fa-envelope text-primary"></i>
                    </div>
                    <div class="text-left">
                      <p class="font-medium">绑定邮箱</p>
                      <p class="text-sm text-neutral-500">未绑定，点击绑定</p>
                    </div>
                  </div>
                  <i class="fa fa-angle-right text-neutral-400"></i>
                </button>
                
                <button id="logoutBtn" class="w-full flex justify-center items-center p-4 mt-4 text-red-500 hover:bg-red-50 rounded-lg transition-colors font-medium">
                  <i class="fa fa-sign-out mr-2"></i> 退出登录
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 编辑用户信息弹窗 -->
    <div id="editUserModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 backdrop-blur-sm">
      <div class="bg-white rounded-2xl w-full max-w-md mx-4 p-6 transform transition-all scale-95 opacity-0" id="modalContent">
        <div class="flex justify-between items-center mb-6">
          <h3 class="text-xl font-bold">编辑个人信息</h3>
          <button id="closeModalBtn" class="text-neutral-400 hover:text-neutral-700 transition-colors">
            <i class="fa fa-times text-xl"></i>
          </button>
        </div>
        
        <form id="editUserForm">
          <div class="text-center mb-6">
            <div class="relative inline-block">
              <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-24 h-24 rounded-full object-cover border-4 border-neutral-100">
              <button type="button" class="absolute bottom-0 right-0 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center shadow-md hover:bg-primary/90 transition-colors">
                <i class="fa fa-camera"></i>
              </button>
            </div>
          </div>
          
          <div class="mb-5">
            <label for="editName" class="block text-sm font-medium text-neutral-700 mb-2">姓名</label>
            <input type="text" id="editName" value="张三" class="w-full px-4 py-3 border border-neutral-300 rounded-lg input-focus">
          </div>
          
          <div class="mb-5">
            <label class="block text-sm font-medium text-neutral-700 mb-2">性别</label>
            <div class="flex space-x-6">
              <label class="inline-flex items-center">
                <input type="radio" name="gender" value="male" checked class="text-primary focus:ring-primary/20">
                <span class="ml-2">男</span>
              </label>
              <label class="inline-flex items-center">
                <input type="radio" name="gender" value="female" class="text-primary focus:ring-primary/20">
                <span class="ml-2">女</span>
              </label>
              <label class="inline-flex items-center">
                <input type="radio" name="gender" value="secret" class="text-primary focus:ring-primary/20">
                <span class="ml-2">保密</span>
              </label>
            </div>
          </div>
          
          <div class="mb-6">
            <label for="editBirthday" class="block text-sm font-medium text-neutral-700 mb-2">生日</label>
            <input type="date" id="editBirthday" value="1990-05-15" class="w-full px-4 py-3 border border-neutral-300 rounded-lg input-focus">
          </div>
          
          <div class="flex space-x-3">
            <button type="button" id="cancelEditBtn" class="flex-1 py-3 border border-neutral-300 rounded-lg text-neutral-700 hover:bg-neutral-50 transition-colors">
              取消
            </button>
            <button type="button" id="saveEditBtn" class="flex-1 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
              保存
            </button>
          </div>
        </form>
      </div>
    </div>
  </main>
  
  <!-- 页脚 -->
  <footer class="bg-neutral-700 text-white pt-16 pb-8">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
        <div>
          <h4 class="text-lg font-bold mb-4">关于我们</h4>
          <ul class="space-y-2 text-neutral-300">
            <li><a href="#" class="hover:text-white transition-colors">公司简介</a></li>
            <li><a href="#" class="hover:text-white transition-colors">招贤纳士</a></li>
            <li><a href="#" class="hover:text-white transition-colors">联系我们</a></li>
            <li><a href="#" class="hover:text-white transition-colors">商家入驻</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-lg font-bold mb-4">客户服务</h4>
          <ul class="space-y-2 text-neutral-300">
            <li><a href="#" class="hover:text-white transition-colors">帮助中心</a></li>
            <li><a href="#" class="hover:text-white transition-colors">售后服务</a></li>
            <li><a href="#" class="hover:text-white transition-colors">配送方式</a></li>
            <li><a href="#" class="hover:text-white transition-colors">支付方式</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-lg font-bold mb-4">商家中心</h4>
          <ul class="space-y-2 text-neutral-300">
            <li><a href="#" class="hover:text-white transition-colors">商家后台</a></li>
            <li><a href="#" class="hover:text-white transition-colors">运营中心</a></li>
            <li><a href="#" class="hover:text-white transition-colors">营销活动</a></li>
            <li><a href="#" class="hover:text-white transition-colors">规则中心</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-lg font-bold mb-4">关注我们</h4>
          <div class="flex space-x-4 mb-4">
            <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition-colors">
              <i class="fa fa-weixin text-xl"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition-colors">
              <i class="fa fa-weibo text-xl"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition-colors">
              <i class="fa fa-instagram text-xl"></i>
            </a>
          </div>
          <p class="text-neutral-300 mb-2">客服热线</p>
          <p class="text-xl font-bold">400-123-4567</p>
          <p class="text-neutral-400 text-sm mt-1">周一至周日 9:00-22:00</p>
        </div>
      </div>
      
      <div class="pt-8 border-t border-neutral-600 text-center text-neutral-400 text-sm">
        <p>© 2023 优购商城 版权所有 | 京ICP备12345678号</p>
      </div>
    </div>
  </footer>
  
  <!-- 通知提示 -->
  <div id="toast" class="fixed top-20 left-1/2 -translate-x-1/2 bg-neutral-800 text-white px-6 py-3 rounded-full shadow-lg transform translate-y-[-100px] opacity-0 transition-all duration-300 flex items-center">
    <i class="fa fa-check-circle mr-2 text-green-400"></i>
    <span id="toastMessage">操作成功</span>
  </div>

  <script>
    // 页面切换功能
    function showPage(pageId) {
      // 隐藏所有页面
      document.querySelectorAll('.page-section').forEach(section => {
        section.classList.add('hidden');
      });
      
      // 显示目标页面
      document.getElementById(`${pageId}-page`).classList.remove('hidden');
      
      // 滚动到顶部
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
    
    // 登录功能
    function login() {
      const phone = document.getElementById('loginPhone').value;
      const password = document.getElementById('loginPassword').value;
      
      // 简单验证
      if (!phone) {
        showToast('请输入手机号码');
        return;
      }
      
      if (!password) {
        showToast('请输入密码');
        return;
      }
      
      // 模拟登录成功
      showToast('登录成功');
      setTimeout(() => {
        showPage('user');
      }, 1000);
    }
    
    // 注册功能
    function register() {
      const phone = document.getElementById('registerPhone').value;
      const code = document.getElementById('registerCode').value;
      const password = document.getElementById('registerPassword').value;
      const agree = document.querySelector('#registerForm input[type="checkbox"]').checked;
      
      // 简单验证
      if (!phone) {
        showToast('请输入手机号码');
        return;
      }
      
      if (!code) {
        showToast('请输入验证码');
        return;
      }
      
      if (!password) {
        showToast('请设置密码');
        return;
      }
      
      if (!agree) {
        showToast('请阅读并同意用户协议和隐私政策');
        return;
      }
      
      // 模拟注册成功
      showToast('注册成功');
      setTimeout(() => {
        showPage('login');
      }, 1000);
    }
    
    // 显示提示消息
    function showToast(message) {
      const toast = document.getElementById('toast');
      const toastMessage = document.getElementById('toastMessage');
      
      toastMessage.textContent = message;
      toast.classList.remove('translate-y-[-100px]', 'opacity-0');
      toast.classList.add('translate-y-0', 'opacity-100');
      
      setTimeout(() => {
        toast.classList.remove('translate-y-0', 'opacity-100');
        toast.classList.add('translate-y-[-100px]', 'opacity-0');
      }, 2000);
    }
    
    // 编辑用户信息
    function editUserInfo() {
      const modal = document.getElementById('editUserModal');
      const modalContent = document.getElementById('modalContent');
      
      modal.classList.remove('hidden');
      modal.classList.add('flex');
      
      // 触发动画
      setTimeout(() => {
        modalContent.classList.remove('scale-95', 'opacity-0');
        modalContent.classList.add('scale-100', 'opacity-100');
      }, 10);
    }
    
    // 关闭模态框
    function closeModal() {
      const modal = document.getElementById('editUserModal');
      const modalContent = document.getElementById('modalContent');
      
      modalContent.classList.remove('scale-100', 'opacity-100');
      modalContent.classList.add('scale-95', 'opacity-0');
      
      setTimeout(() => {
        modal.classList.remove('flex');
        modal.classList.add('hidden');
      }, 300);
    }
    
    // 保存用户信息
    function saveUserInfo() {
      const name = document.getElementById('editName').value;
      const gender = document.querySelector('input[name="gender"]:checked').value;
      const birthday = document.getElementById('editBirthday').value;
      
      // 更新显示的用户信息
      document.getElementById('userName').textContent = name;
      
      let genderText = '保密';
      if (gender === 'male') genderText = '男';
      if (gender === 'female') genderText = '女';
      document.getElementById('userGender').textContent = genderText;
      
      document.getElementById('userBirthday').textContent = birthday;
      
      showToast('信息保存成功');
      closeModal();
    }
    
    // 关闭移动菜单
    function closeMobileMenu() {
      document.getElementById('mobileMenu').classList.add('hidden');
    }
    
    // 页面加载完成后初始化事件监听
    document.addEventListener('DOMContentLoaded', () => {
      // 用户按钮点击事件
      document.getElementById('userBtn').addEventListener('click', () => {
        showPage('login');
      });
      
      // 移动菜单按钮点击事件
      document.getElementById('mobileMenuBtn').addEventListener('click', () => {
        const mobileMenu = document.getElementById('mobileMenu');
        mobileMenu.classList.toggle('hidden');
      });
      
      // 密码显示切换
      document.getElementById('toggleLoginPwd').addEventListener('click', function() {
        const passwordInput = document.getElementById('loginPassword');
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);
        this.innerHTML = type === 'password' ? '<i class="fa fa-eye-slash"></i>' : '<i class="fa fa-eye"></i>';
      });
      
      document.getElementById('toggleRegisterPwd').addEventListener('click', function() {
        const passwordInput = document.getElementById('registerPassword');
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);
        this.innerHTML = type === 'password' ? '<i class="fa fa-eye-slash"></i>' : '<i class="fa fa-eye"></i>';
      });
      
      // 获取验证码按钮
      let countdown = 0;
      document.getElementById('getCodeBtn').addEventListener('click', function() {
        const phone = document.getElementById('registerPhone').value;
        
        if (!phone) {
          showToast('请先输入手机号码');
          return;
        }
        
        if (countdown > 0) return;
        
        // 模拟发送验证码
        showToast('验证码已发送，请注意查收');
        
        // 倒计时
        countdown = 60;
        this.textContent = `${countdown}s后重新获取`;
        this.classList.add('opacity-50', 'cursor-not-allowed');
        
        const timer = setInterval(() => {
          countdown--;
          this.textContent = `${countdown}s后重新获取`;
          
          if (countdown <= 0) {
            clearInterval(timer);
            this.textContent = '获取验证码';
            this.classList.remove('opacity-50', 'cursor-not-allowed');
          }
        }, 1000);
      });
      
      // 模态框相关事件
      document.getElementById('closeModalBtn').addEventListener('click', closeModal);
      document.getElementById('cancelEditBtn').addEventListener('click', closeModal);
      document.getElementById('saveEditBtn').addEventListener('click', saveUserInfo);
      
      // 点击模态框外部关闭
      document.getElementById('editUserModal').addEventListener('click', function(e) {
        if (e.target === this) {
          closeModal();
        }
      });
      
      // 退出登录
      document.getElementById('logoutBtn').addEventListener('click', () => {
        showToast('已退出登录');
        setTimeout(() => {
          showPage('login');
        }, 1000);
      });
      
      // 滚动时导航栏效果
      window.addEventListener('scroll', () => {
        const navbar = document.getElementById('navbar');
        if (window.scrollY > 50) {
          navbar.classList.add('py-2', 'shadow');
          navbar.classList.remove('py-3');
        } else {
          navbar.classList.add('py-3');
          navbar.classList.remove('py-2', 'shadow');
        }
      });
    });
  </script>
</body>
</html>